<template>
  <div class="table-page">
    <GiTable
      row-key="key"
      id="largeScreenTable"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :pagination="false"
      :scroll="{ x: '100%', y: 1200, minWidth: 1000 }"
      :scrollbar="true"
      @refresh="getData"
    >
      <template #sourceChatroomUserWechatTotalCount="{ record }">
        <a-button type="text" @click="toDetail(record.date)">{{ record.sourceChatroomUserWechatTotalCount }}</a-button>
      </template>
    </GiTable>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { sourceChatRoomGraphData } from '@/apis'
import { totalDataO } from './data.js'

defineOptions({ name: 'largeScreenTable' })

const router = useRouter()
const props = defineProps(['commonParam'])
const loading = ref(false)
const tableData = ref([])

const columns = ref([
  {
    title: '日期',
    width: 150,
    dataIndex: 'date'
  },
  {
    title: '设备激活群总数',
    width: 150,
    dataIndex: 'userWechatGroupTotalCount'
  },
  {
    title: '微信消息数',
    width: 150,
    dataIndex: 'sourceChatroomMessageTotalCount'
  },
  {
    title: '发送商品总数',
    width: 150,
    dataIndex: 'sourceChatroomGoodsTotalCount'
  },
  {
    title: '源头群挂设备数',
    width: 150,
    slotName: 'sourceChatroomUserWechatTotalCount'
  },
  {
    title: '源头群挂用户数',
    width: 150,
    dataIndex: 'sourceChatroomUserTotalCount'
  },
  {
    title: '源头群挂群数量',
    width: 150,
    dataIndex: 'sourceChatroomUserWechatGroupTotalCount'
  },
  {
    title: '爆品数量',
    width: 150,
    dataIndex: 'sourceChatroomHotSaleGoodsCount'
  },
  {
    title: '总订单',
    width: 150,
    dataIndex: 'sourceChatroomTotalOrderCount'
  },
  {
    title: '总GMV',
    width: 150,
    dataIndex: 'sourceChatroomSumGmv'
  },
  {
    title: '总佣金',
    width: 150,
    dataIndex: 'sourceChatroomSumCommission'
  }
])

const getData = async () => {
  try {
    loading.value = true
    const param = {
      startAt: props.commonParam.startAt,
      endAt: props.commonParam.endAt,
      sourceChatroomId: props.commonParam.sourceChatroomId,
      platformId: props.commonParam.platformId
    }
    const apiAll = []
    const tableDataO = []
    totalDataO.forEach((item) => {
      apiAll.push(sourceChatRoomGraphData({ ...param, type: item.key }))
    })
    Promise.all(apiAll).then((res) => {
      res.forEach((m) => {
        m.data.data.forEach((item, index) => {
          if (!tableDataO[index]) tableDataO[index] = {}
          if (!tableDataO[index].date) tableDataO[index].date = item.keyAsString
          if (!tableDataO[index].key) tableDataO[index].key = index + 1
          tableDataO[index][m.data.type] =
            m.data.type === 'sourceChatroomGoodsTotalCount' ? item.count.count.value : item.amount
        })
      })
      tableData.value = tableDataO.reverse()
      loading.value = false
    })
  } catch {
    loading.value = false
  }
}

watch(
  () => props.commonParam,
  () => {
    getData()
  },
  {
    deep: true,
    immediate: true
  }
)

const toDetail = (date) => {
  const startAt = dayjs(date).startOf('day').format('YYYY-MM-DD HH:mm:ss')
  const endAt = dayjs(date).endOf('day').format('YYYY-MM-DD HH:mm:ss')
  router.push({
    name: 'groupRegistration',
    query: { id: date || undefined },
    state: {
      item: JSON.stringify({
        sourceChatroomId: props.commonParam.sourceChatroomId,
        startAt,
        endAt
      })
    }
  })
}

defineExpose({ getData })
</script>
<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
